function SmoothAnimation(div,x,y,r){
    this.root = div;
    this.animation = anime({
      targets: div,
      easing: 'linear',
      duration:20,
      translateX: x,
      translateY: y,
      rotate: r,
      autoplay: false
    });
    this.ref = null;

        $(window).scroll(function(){
                if (null ===  this.ref) {
                   this.ref = requestAnimationFrame(this.update.bind(this));
                }
        }.bind(this));
}
SmoothAnimation.prototype = {
    constructor: SmoothAnimation,
    update: function() {
                     var progress = this.animation.progress / 100;
                     var proxyProgress = Math.max(0,Math.min(($(window).scrollTop()-$(this.root).offset().top+700)/1000,1));
                     var diff = proxyProgress - progress;
                     progress += (proxyProgress - progress) * 0.1;
                     this.animation.seek(progress * 20);

                     if (Math.abs(diff) > 0.00005) {
                       this.ref = requestAnimationFrame(this.update.bind(this));
                     } else if (this.ref) {
                       cancelAnimationFrame(this.ref);
                       this.ref = null;
                     }
                 }
    }




$(document).ready(()=>{
    cards = [
        {
            durationOffset: 40,
            posX: "-500px",
            topOffset: 5
        },
        {
            durationOffset: 12,
            posX: "-850px",
            topOffset: 50
        },
        {
            durationOffset: 12,
            posX: "-380px",
            topOffset: 90
        },
        {
            durationOffset: 25,
            posX: "400px",
            topOffset: 75
        },
        {
            durationOffset: 321,
            posX: "311px",
            topOffset: 4
        },
        {
            durationOffset: 90,
            posX: "600px",
            topOffset: 50
        },
        {
            durationOffset: 120,
            posX: "444px",
            topOffset: 125
        },

    ]


   // new SmoothAnimation("#earth",-20,40,1);
    new SmoothAnimation("#sun",-20,40,0);


    frame1 = anime({
        targets: ["#firstFrame"],
        translateY: [-200],
        opacity: 0,
        duration:800,
        easing: 'easeInCubic',
        autoplay: false,
    });

    erde = anime({
        targets: ["#earth"],
        translateY: ["0vh","-100vh"],
        translateX: ["0vw","-5vw"],
        opacity:[{value: "1", duration:2500},{value: "0", duration:1500}],
        duration:4000,
        easing: 'linear',
        autoplay: false,
    });

    Sonde = anime({
        targets: ["#spaceship"],
        translateX: ["-50%",0],
        translateY: ["50%",0],
        duration: 600,
        easing: 'linear',
        scale: [1.8,1],
        autoplay: false,
    });

    cardFadeIn = anime({
        targets: [".image-8",".image-9"],
        opacity: 1,
        autoplay: false,
        easing: 'linear',
        delay: anime.stagger(200, {start: 400}),
        duration: 1200
    });

    function quad(x) {
        if(x<-2 || x>2){
            return 0;
        }
        return (-(x*x) + 4)/4;
    }

    sideCard = anime({
        targets: [".card"],
        translateY: function(el, i) { return [(100 + cards[i].topOffset) + "vh", (-200 + cards[i].topOffset) + "vh"] },
        autoplay: false,
        easing: 'linear',
        duration: function(el, i) { return cards[i].durationOffset+ 2300},
        delay: 1400,
        update: function(anim) {
            for(element of document.querySelectorAll('.card')){
                $(element).find(".card-overlay").css("opacity",0.8 - 0.8*quad(parseFloat(anime.get(element,'translateY','vh'))/30));
            }
            $(".card").each((i,o)=>{

            });

        }
    });

    lastFrame = anime({
        targets: ["#lastframe"],
        translateY: ["100vh","0vh",{value:"-28vh",duration:500, delay:850},{value:"-150vh",duration:1700, delay:780 ,easing: 'easeOutQuad'}],
        opacity: [{value:0,duration:0}, {value:1,delay:900,duration:400}, {value:0,delay:2500,duration:400}],
        autoplay: false,
        easing: 'easeOutQuad',
        duration: 3300,
        delay: 35
    });

    mainCardFadeOut = anime({
        targets: [".main-card"],
        translateY: [{value: "-17vh", duration:600},{value: "-100vh",delay:1050, duration:700}],
        scale: [{value: "1.4", duration:0},{value: "1", duration:780}],
        //opacity: [{value: "1", duration:600},{value: "0",delay:1050, duration:700}],
        autoplay: false,
        easing: 'linear',
        delay:850,
    });

    mainCardOverlayFadeOut = anime({
        targets: [".main-card>.card-overlay"],
        opacity: [{value: "0", duration:0},{value: "1",delay:1650, duration:700}],
        autoplay: false,
        easing: 'linear',
        delay:850,
    });

    buttons = anime({
        targets: ["#buttons", "#lastframe>*>.subtext"],
        opacity: [0,1],
        autoplay: false,
        easing: 'linear',
        duration: 300,
        delay: 3250,
    });

    background = anime({
        targets: [".background"],
        translateY: [0, "-4000px"],
        autoplay: false,
        easing: 'linear',
        duration: 20000,
    });

    function updateAnime(){
               var factor = 0.7;
                Sonde.seek( $(window).scrollTop()*factor );
                frame1.seek( $(window).scrollTop()*factor );
                cardFadeIn.seek( $(window).scrollTop()*factor );
                erde.seek( $(window).scrollTop()*factor );
                sideCard.seek( $(window).scrollTop()*factor );
                buttons.seek( $(window).scrollTop()*factor );
                lastFrame.seek( $(window).scrollTop()*factor );
                mainCardFadeOut.seek( $(window).scrollTop()*factor );
                mainCardOverlayFadeOut.seek( $(window).scrollTop()*factor );
                background.seek( $(window).scrollTop()*factor );
    }

    $(window).scroll(function(){
        updateAnime();
    }.bind(this));

    $(document).ready(updateAnime);



    var fbuttons = [];
    $(".button:not(.noeffect)").each((i,o)=>{
        fbuttons.push({
            obj: o,
            catched: false
        });
    });

    for(var el of fbuttons){
        const a = el;
        $(a.obj).on("mouseenter",()=>{
            a.catched = true;
            for(var el2 of fbuttons){
                if($.data(a.obj) != $.data(el2.obj) && el2.catched){
                    el2.catched = false;
                    anime({
                        targets: el2.obj,
                        translateX: 0,
                        translateY: 0,
                        duration: 20,
                        easing: 'easeOutSine'
                    });
                }
            }
        });
    }

    $(window).on("mousemove",(e)=>{
        if($(window).width() < 992){
            return;
        }
        dY= (e.pageY - $(document).scrollTop() ) / $(window).height();
        dX= (e.pageX - $(document).scrollLeft() ) / $(window).width();
        anime({
            targets: ".bg-wrapper",
            translateX: dX*-24,
            translateY: dY*-24,
            duration: 4640,
            easing: 'cubicBezier(0,.64,.54,.81)'
        });
        $(".cursor").css("transform","translate("+(e.pageX - $(document).scrollLeft())+"px,"+(e.pageY - $(document).scrollTop())+"px)");
        for(el of fbuttons){

                var o = el.obj;
                var ofs = $(o).offset();
                var dx = ofs.left + $(o).outerWidth()/2 - e.pageX;
                var dy = ofs.top + $(o).outerHeight()/2 - e.pageY;
                var distance = parseInt(Math.sqrt(dx*dx + dy*dy ));
                var rx = Math.max((Math.abs(dx)-$(o).outerWidth()/2),0);
                var ry = Math.max((Math.abs(dy)-$(o).outerHeight()/2),0);

                var rdistance = parseInt(Math.sqrt(rx*rx + ry*ry ));

                if(rdistance<10 && !el.catched){
                    for(el2 of fbuttons){
                        if(el2.catched){
                            el2.catched = false;
                            anime({
                                targets: el2.obj,
                                translateX: 0,
                                translateY: 0,
                                duration: 20,
                                easing: 'easeOutSine'
                            });
                        }
                    }
                    el.catched=true;
                }
                if(el.catched){
                anime({
                    targets: o,
                    translateX: -(dx/distance)*distance/3,
                    translateY: -(dy/distance)*distance/3,
                    duration: 20,
                    easing: 'easeOutSine'
                });


                if(rdistance>40){
                    el.catched = false;
                    anime({
                        targets: o,
                        translateX: 0,
                        translateY: 0,
                        duration: 20,
                        easing: 'easeOutSine'
                    });
                }
            }
            //$(o).html(distance  +" px" );
        };

    });

})

